<template>
  <div class="row justify-center fit">
    <div class="fit q-pa-md profile-home">
      <template v-if="videos && videos.length > 0">
        <div class="row items-center">
          <div class="time-label q-my-sm">
            {{ $t('profile.recentUploads') }}
          </div>
          <edit-line class="col" style="height: 50px" />
        </div>

        <div class="grid-video-container">
          <video-card
            v-for="video in videos"
            :key="video.id"
            :video="video"
            :ratio="1 / 1.2"
          />
        </div>
      </template>
      <template v-if="featuredVideo && featuredVideo.length > 0">
        <div class="row items-center">
          <div class="time-label q-my-sm">{{ $t('profile.featured') }}</div>
          <edit-line class="col" style="height: 50px" />
        </div>

        <div class="grid-video-container">
          <video-card
            v-for="video in featuredVideo"
            :key="video.id"
            :video="video"
            :ratio="1 / 1.2"
          />
        </div>
      </template>

      <div
        class="q-mt-lg add-section-container column justify-center items-center"
        @mouseover.prevent="showAddSectionButton = true"
        @mouseout.prevent="showAddSectionButton = false"
        @click="addSection"
      >
        <template v-if="showAddSectionButton">
          <q-separator class="line" color="#00B5BC" />
          <div class="add-section-btn non-selectable no-pointer-events">
            {{ $t('profile.addSection') }}
          </div>
        </template>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import Video from 'src/models/Video';
import VideoCard from 'components/video/SmallVideoCard.vue';
import { ref, onBeforeMount, computed } from 'vue';
import EditLine from './HomeSectionEditLine.vue';
import { useUserStore } from 'src/stores/user-store';
import { useVideoStore } from 'src/stores/video-store';
const userStore = useUserStore();
const videoStore = useVideoStore();
const videos = computed(() => userStore.myVideos);
const featuredVideo = computed(() => videoStore.featuredVideos);
onBeforeMount(async () => {
  await userStore.getMyVideos({ page: 0, size: 6 });
  await videoStore.getFeaturedVideos({ page: 0, size: 6 });
});
function addSection() {
  console.log('Add Section');
}
const showAddSectionButton = ref(false);
</script>
<style lang="scss" scoped>
.time-label {
  font-size: 14px;
  color: #acacac;
}
.profile-home {
  max-width: 1450px;
  min-width: 960px;
}
.add-section-container {
  position: relative;
  min-height: 30px;
  .add-section-btn {
    border: 1px solid #00b5bc;
    background-color: black;
    color: #00b5bc;
    width: 166px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    border-radius: 4px;
    z-index: 10;
  }
  .line {
    width: 100%;
    height: 1px;
    background-color: #00b5bc;
    margin: 0px;
    position: absolute;
    top: 15px;
    z-index: 1;
  }
}
</style>
